
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<%@page import="tuSecure.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="javax.jdo.PersistenceManager" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>
<%@ page import="tuSecure.Message" %>
<%@ page import="tuSecure.PMF" %>

  <head> 
  
	<%
		String content="work";
		String symbol;
		String type;
		String phone;
		String comment;
		double lat=0.0;
		double longt=0.0;
		String date;
		String total="test";
		
		
		PersistenceManager pm = PMF.get().getPersistenceManager();
	    String query = "select from " + Alert.class.getName();
	    List<Alert> alrts = (List<Alert>) pm.newQuery(query).execute();
		int size = alrts.size();
	    
	    pm.close();

	%>
  
  
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Basic Example</title> 
	 <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAmwJwPrpMgJ_kDK4GTq40mhTV2vKp73DbbXPyy4AJQArUN-P-hRTaKFaAhNjX1ICGpyLsboTh6LsWpQ"
      type="text/javascript"></script>
    <script type="text/javascript" src="http://static.simile.mit.edu/timeline/api/timeline-api.js"></script>
    <script src="../timemap.js" type="text/javascript"></script>
        <script type="text/javascript">
//ABQIAAAAmwJwPrpMgJ_kDK4GTq40mhTV2vKp73DbbXPyy4AJQArUN-P-hRTaKFaAhNjX1ICGpyLsboTh6LsWpQ
//ABQIAAAAmwJwPrpMgJ_kDK4GTq40mhS6fQ8TiRzni-H4JZ5YhXMfHctOpxQDKHbJDX4Bp6IaRx0cG1LDwn2DQg //local
var tm;
function onLoad() {

    tm = TimeMap.init({
        mapId: "map",               // Id of map div element (required)
        timelineId: "timeline",     // Id of timeline div element (required)
        options: {
            eventIconPath: "../images/"
        },
        datasets: [
            {
                id: "message",
                title: "Messages",
                theme: "orange",
                // note that the lines below are now the preferred syntax
                type: "basic",
                options: {
                    items: [
                    <%
                    for(int i=0;i<size;i++)
                    {         
						symbol=(alrts.get(i)).getSymbol();
						content=(alrts.get(i)).getContent();
						type=(alrts.get(i)).getType();
						phone=(alrts.get(i)).getPhone(); 
						comment=(alrts.get(i)).getComment();
				 		lat=Double.parseDouble((alrts.get(i)).getLatitude());
						longt=Double.parseDouble((alrts.get(i)).getLongitude());        
						date=(alrts.get(i)).getDate();
						total=symbol+"<b> Name: "+content+ "</b> Type: " +type+" Phone: "+phone+" Comment: "
						+comment +" Latitude: "+lat+"Longitude:"+longt+" Date:"+date;
                    %>
                        {
                          "start" : "<%out.print(date);%>",
                          "end" : "<%out.print(date);%>",
                          "point" : {
                              "lat" : <%out.print(lat);%>,
                              "lon" :  <%out.print(longt);%>
                           },
                          "title" : "<%out.print(content);%>",
                          "options" : {
                            // set the full HTML for the info window
                            "infoHtml": "<div class='custominfostyle'>Message:<%out.print(total);%>(</div>"
                          }
                        }<% if(i!=size-1)out.print(",");//only add comma if not last set%>
                     <%
                     
                     }//end for loop
                     
                     %>   
                    ]
                }
            }
        ],
        bandIntervals: [
            Timeline.DateTime.HOUR, 
            Timeline.DateTime.DAY
        ]
    });
    // manipulate the timemap further here if you like
}
    </script>
        <link href="examples.css" type="text/css" rel="stylesheet"/>
    <style>
    div#timelinecontainer{ height: 300px; }
    div#mapcontainer{ height: 300px; }
    </style>
  </head>

  <body onload="onLoad();" onunload="GUnload();">
    <div id="help">
    </div>
    <div id="timemap">
        <div id="timelinecontainer">
          <div id="timeline"></div>
        </div>
        <div id="mapcontainer">
          <div id="map"></div>
        </div>
    </div>
  </body>
</html>
